<script setup>
import { ref, onMounted } from "vue";
const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);
});
</script>

<template>
  <div class="scientist">
    <!-- 科学家 -->
    <div class="left">
      <Transition
        enter-active-class="animate__animated animate__fadeInDownBig "
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <div class="top" v-if="isShowAnimation">
          <div class="title">探索真理的先行者</div>
          <div class="text">
            中国历史上涌现了无数追求真理的科学家。张衡以地动仪揭示地震奥秘，祖冲之将圆周率精确到小数点后七位，沈括在《梦溪笔谈》中系统记录自然科学与工程技术，李时珍踏遍山川编撰《本草纲目》，重塑药物学体系。宋应星在《天工开物》中详述百工技艺，徐光启融合中西科学推动天文历法革新。
          </div>
        </div>
      </Transition>
      <div class="bottom">
        <Transition
          enter-active-class="animate__animated animate__fadeInUpBig "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <knowledge-graph v-if="isShowAnimation"></knowledge-graph>
        </Transition>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <Transition
          enter-active-class="animate__animated animate__fadeInRightBig "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle class="right1">
            <div class="twoPie">
              <ScientistPieTwoChart></ScientistPieTwoChart>
              <ScientistPieChart></ScientistPieChart>
            </div>
          </BackgroundStyle>
        </Transition>
      </div>
      <div class="center">
        <Transition
          enter-active-class="animate__animated animate__fadeInRightBig "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle class="right2">
            <scientistBarChart></scientistBarChart>
          </BackgroundStyle>
        </Transition>
      </div>
      <div class="bottom">
        <Transition
          enter-active-class="animate__animated animate__fadeInRightBig "
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <BackgroundStyle class="right3">
            <scientistLineChart></scientistLineChart>
          </BackgroundStyle>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//控制右边图的动画时间
.right {
  .right1 {
    --animate-duration: 0.7s; /* 控制动画速度 */
  }
  .right2 {
    --animate-duration: 0.6s; /* 控制动画速度 */
  }
  .right3 {
    --animate-duration: 0.5s; /* 控制动画速度 */
  }
}
.scientist {
  --animate-duration: 0.5s; /* 控制动画速度 */
  display: flex;
  width: 100%;
  height: calc(100vh - 60px); // 总高度减去导航栏
  // background: pink;
  .left {
    flex: 3;
    height: 100%; //去除导航栏的高度
    // min-width: 600px; // 防止过度压缩
    // background: #7fd446;
    display: flex;
    flex-direction: column;
    .top {
      flex: 1;
      padding: 10px 20px;
      // background: #bb3939;
      padding-bottom: 0;
      .title {
        font-size: 30px;
        margin-bottom: 5px;
        font-family: yasong;
        margin-bottom: 10px;
      }
      .text {
        font-family: yasong;
        line-height: 30px;
        font-size: 18px;
      }
    }
    .bottom {
      flex: 6;
    }
  }
  .right {
    flex: 2;
    height: 100%; //去除导航栏的高度
    // background: #d4ca46;
    display: flex;
    flex-direction: column;
    .top {
      flex: 1;
      margin: 10px;
      // background: #6733e2;
      .twoPie {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // width: 100%;
        height: 100%;
      }
    }
    .center {
      flex: 1;
      margin: 0 10px;
      // background: #33a2e2;
    }
    .bottom {
      flex: 1;
      margin: 10px;
      // background: #b933e2;
    }
  }
}
</style>
